<template>
	<view>
		<view class="flexleft flex-wrap ffffff" style="padding-bottom: 30rpx;padding-top: 10rpx;">
			<view class="flexcenter margin_top2" style="width: 20%;" v-for="item in groupPerson" :key="item.id">
				<view class="flexcolumn">
					<image :src="item.avatar" style="width: 100rpx;height: 100rpx;border-radius: 15rpx;" mode="">
					</image>
					<view class="xiaohei smalltext textcenter xiankuan" style="margin-top: 5rpx;width: 100rpx;">
						{{item.username}}
					</view>
				</view>
			</view>
		</view>
		<view class="margin_top mainpadding ffffff">
			<view class="flexbetween pdl" @click="uploadImg()">
				<view class="xiaohei main_size">群头像</view>
				<view class="flexright">
					<image :src="avatar_text" style="width: 80rpx;height: 80rpx;border-radius: 50%;"
						class="margin_right1" mode=""></image>
					<u-icon name="arrow-right" color="#333" size="12"></u-icon>
				</view>
			</view>
			<view class="flexbetween margin_top pdl">
				<view class="xiaohei main_size">群名称</view>
				<input type="text" class="textright xiaohei main_size" @blur="changename" :disabled="user_id!=groupInfo.user_id" v-model="groupInfo.name"
					placeholder="默认名称" name="" id="">
			</view>
			<view class="flexbetween margin_top pdl" @click="jumpdetail('/pages/tab5/qunchengygl?id=',group_id)"
				v-if="user_id==groupInfo.user_id">
				<view class="xiaohei main_size">群成员管理</view>
				<u-icon name="arrow-right" color="#333" size="12"></u-icon>
			</view>
			<view class="flexbetween margin_top pdl" v-if="user_id==groupInfo.user_id">
				<view class="xiaohei main_size">群组禁言</view>
				<u-switch inactiveColor="rgb(230, 230, 230)" v-model="jy_status" activeColor="#c1282e"
					@change="changejy(jy_status)"></u-switch>
			</view>
			<view class="flexbetween margin_top pdl" @click="show=true">
				<view class="xiaohei main_size">群二维码</view>
				<u-icon name="arrow-right" color="#333" size="12"></u-icon>
			</view>
			<view class="margin_top" style="padding-bottom: 50rpx;">
				<view class="xiaohei main_size">群描述</view>
				<textarea class="margin_top xiaohei main_size" :disabled="user_id!=groupInfo.user_id" @blur="changeintro" style="width: 100%;height: 150rpx;" placeholder=""
					v-model="groupInfo.intro" /></textarea>
			</view>
		</view>
		<view class="mainpadding_top posibottom" @click="outgroup">
			<view class="submitbtn">{{user_id==groupInfo.user_id?'解散':'退出'}}群聊</view>
		</view>
		<u-modal :show="show" title="扫码加入群聊" confirmColor="#c1282e" confirmText="关闭" @confirm="show=false">
			<view class="slot-content margin-top">
				<uqrcode ref="uqrcode" canvas-id="qrcode" v-bind:value="group_id" :options="{ margin: 10}" size="180">
				</uqrcode>
			</view>
		</u-modal>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				modal:{
					modalShow:false,
					title:"",
				},
				group_id: "",
				groupPerson: [],
				groupInfo: {},
				show: false,
				jy_status: 1,
				user_id: "",
				avatar:"",
				avatar_text: ""
			}
		},
		onLoad(options) {
			this.group_id = options.id
			this.user_id = uni.getStorageSync("user_id")
			this.getInfo()
		},
		onShow() {
			this.getgroupPerson()
		},
		methods: {
			outgroup(){
				if(this.user_id != this.groupInfo.user_id){
					this.modal.title = "是否确认退出群聊"
				}else{
					this.modal.title = "是否确认解散群聊"
				}
				this.modal.modalShow = true
			},
			modalSure(){
				httpRequest.request('/webim/groups_user/exitGroup', 'GET', {
					groupid: this.group_id,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==0){
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},1000)
					}
				})
				this.modalcancel()
			},
			modalcancel(){
				this.modal.modalShow = false
			},
			// 修改群名称
			changename(){
				if (this.user_id != this.groupInfo.user_id) return false
				this.setGroupInfo({
					groupid:this.group_id,
					name:this.groupInfo.name,
				})
			},
			// 修改群描述
			changeintro(){
				if (this.user_id != this.groupInfo.user_id) return false
				this.setGroupInfo({
					groupid:this.group_id,
					intro:this.groupInfo.intro,
				})
			},
			getInfo() {
				httpRequest.request('/webim/Groups/groupProfile', 'GET', {
					groupid: this.group_id,
				}).then(res => {
					this.groupInfo = res.data
					this.avatar = res.data.icon
					this.avatar_text = res.data.icon_text
					this.jy_status = res.data.jy_status == 2 ? true : false
				})
			},
			setGroupInfo(data){
				httpRequest.request('/webim/Groups/editGroup', 'GET', data).then(res => {})
			},
			getgroupPerson() {
				httpRequest.request('/webim/groups_user/members', 'GET', {
					id: this.group_id,
				}).then(res => {
					this.groupPerson = res.data.list
				})
			},
			changejy(datas) {
				httpRequest.request("/webim/Groups/setGroupJy", 'POST', {
					id: this.group_id,
					jy_status: datas ? 2 : 1
				}).then(res => {
					httpRequest.toast(res.msg)
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上传图片
				if (this.user_id != this.groupInfo.user_id) return false
				let _this = this;
				let num = 1;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.avatar = res.url
					this.avatar_text = image_item
					this.setGroupInfo({
						groupid:this.group_id,
						icon:this.avatar
					})
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>